<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>已测评教师 - IVT绩效考核系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
        }

        .back-btn {
            background: none;
            border: none;
            color: white;
            font-size: 18px;
            margin-right: 15px;
            cursor: pointer;
            padding: 5px;
        }

        .header h1 {
            font-size: 18px;
            font-weight: 600;
        }

        .container {
            padding: 20px;
        }

        .teacher-item {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .teacher-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .teacher-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .teacher-name {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }

        .score-badge {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 14px;
            font-weight: 600;
        }

        .teacher-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .info-item {
            display: flex;
            flex-direction: column;
        }

        .info-label {
            font-size: 12px;
            color: #999;
            margin-bottom: 5px;
        }

        .info-value {
            font-size: 14px;
            color: #333;
            font-weight: 500;
        }

        .evaluation-time {
            grid-column: 1 / -1;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #f0f0f0;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }

        .empty-icon {
            font-size: 48px;
            margin-bottom: 15px;
            opacity: 0.5;
        }

        .error-message {
            background: #fee;
            color: #c33;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
            display: none;
        }

        .error-message.show {
            display: block;
        }


    </style>
</head>
<body>
<div class="header">
    <button class="back-btn" onclick="goBack()">‹</button>
    <h1>已测评教师</h1>
</div>

<div class="container">
    <div class="error-message" id="errorMessage"></div>

    <div class="loading" id="loading">
        正在加载已测评教师列表...
    </div>

    <div id="teachersList"></div>
</div>

<script>
        let currentUser = '';

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initPage();
        });

        function initPage() {
            // 从localStorage获取当前用户信息
            const userInfo = localStorage.getItem('currentUser');
            if (!userInfo) {
                showError('用户信息获取失败，请重新登录');
                setTimeout(() => {
                    window.location.href = 'index.html';
                }, 2000);
                return;
            }

            currentUser = JSON.parse(userInfo).jsxm;
            loadEvaluatedTeachers();
        }

        function loadEvaluatedTeachers() {
                            fetch('/evaluation/api/h5/teacher/evaluated')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('loading').style.display = 'none';

                    if (data.success) {
                        renderTeachersList(data.data);
                    } else {
                        showError(data.message || '加载已测评教师列表失败');
                    }
                })
                .catch(error => {
                    document.getElementById('loading').style.display = 'none';
                    console.error('Error:', error);
                    showError('网络错误，请稍后重试');
                });
        }

        function renderTeachersList(teachers) {
            const container = document.getElementById('teachersList');

            if (!teachers || teachers.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-icon">📝</div>
                        <div>暂无已测评的教师</div>
                    </div>
                `;
                return;
            }

            container.innerHTML = teachers.map(teacher => `
                <div class="teacher-item" onclick="viewTeacherDetail(${teacher.bh})">
                    <div class="teacher-header">
                        <div class="teacher-name">${teacher.bcpjs}</div>
                        <div class="score-badge">${teacher.totalscore || 0}分</div>
                    </div>
                    <div class="teacher-info">
                        <!--div class="info-item">
                            <div class="info-label">教师姓名</div>
                            <div class="info-value">${teacher.bcpjs}</div>
                        </div-->
                        <div class="info-item evaluation-time">
                            <div class="info-label">测评时间</div>
                            <div class="info-value">${formatDate(teacher.cpsj)}</div>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        function viewTeacherDetail(relationId) {
            window.location.href = `teacher-detail.html?id=${relationId}`;
        }

        function formatDate(dateString) {
            if (!dateString) return '-';

            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');

            return `${year}-${month}-${day} ${hours}:${minutes}`;
        }

        function showError(message) {
            const errorDiv = document.getElementById('errorMessage');
            errorDiv.textContent = message;
            errorDiv.classList.add('show');
        }

        function goBack() {
            window.history.back();
        }


</script>
</body>
</html>
